<template>
    <div class="back_contain_n visualImg">
        <el-row :gutter="40">
            <el-col :span="16">
                <div class="box box2">
                    <p class="sub"><i class="iconfont icon-jichupeizhi"></i>系统设置</p>
                    <li class="list">
                        <div class="part_nav part1">
                            <p class="firstTitle">系统名称</p>
                        </div>
                        <div class="part_nav part2">
                            <p v-if="!changeSystemName">{{sysInfo.sysName}}</p>
                            <el-input class="change_input" v-else v-model="sysInfo.sysName" placeholder="" clearable></el-input>
                        </div>
                        <div class="part_nav part3" v-if="hasRole('images:system:edit')">
                            <div v-if="!changeSystemName" @click="changeSystemName = true">修改</div>
                            <div v-else class="red" @click="saveSysName">保存</div>
                        </div>
                    </li>
                    <li class="list">
                        <div class="part_nav part1">
                            <p class="firstTitle">APP系统名称</p>
                        </div>
                        <div class="part_nav part2">
                            <p v-if="!changeValue2">{{sysInfo.value2}}</p>
                            <el-input class="change_input" v-else v-model="sysInfo.value2" placeholder="" clearable></el-input>
                        </div>
                        <div class="part_nav part3" v-if="hasRole('images:system:edit')">
                            <div v-if="!changeValue2" @click="changeValue2 = true">修改</div>
                            <div v-else class="red" @click="saveValue2">保存</div>
                        </div>
                    </li>
                    <li class="list">
                        <div class="part_nav part1">
                            <p class="firstTitle">系统版本</p>
                        </div>
                        <div class="part_nav part2">
                            <p v-if="!changeCopyRight">{{sysInfo.copyRight}}</p>
                            <el-input class="change_input" v-else v-model="sysInfo.copyRight" placeholder="" clearable></el-input>
                        </div>
                        <div class="part_nav part3" v-if="hasRole('images:system:edit')">
                            <div v-if="!changeCopyRight"  @click="changeCopyRight = true">修改</div>
                            <div v-else class="red" @click="saveCopyRight">保存</div>
                        </div>
                    </li>
                    <li class="list">
                        <div class="part_nav part1">
                            <p class="firstTitle">版权声明</p>
                        </div>
                        <div class="part_nav part2">
                            <p v-if="!changeValue1">{{sysInfo.value1}}</p>
                            <el-input class="change_input" v-else v-model="sysInfo.value1" placeholder="" clearable></el-input>
                        </div>
                        <div class="part_nav part3" v-if="hasRole('images:system:edit')">
                            <div v-if="!changeValue1" @click="changeValue1 = true">修改</div>
                            <div v-else class="red" @click="saveValue1">保存</div>
                        </div>
                    </li>
                </div>
            </el-col>
            <el-col :span="8">
                <div class="box fu box2">
                    <p class="sub"><i class="iconfont icon-fuwu"></i>实施与服务</p>
                    <li class="list_fu">
                        <span class="name">服务商：</span>
                        <span class="right">南京睿孚信息科技有限公司</span>
                    </li>
                    <li class="list_fu">
                        <span class="name">服务热线：</span>
                        <span class="right">025-52288309（工作日09:00-17:30）</span>
                    </li>
                    <li class="list_fu">
                        <span class="name">技术支持：</span>
                        <span class="right">18951749013（7×24h）</span>
                    </li>
                </div>
            </el-col>
        </el-row>
        <div class="box">
            <p class="sub"><i class="iconfont icon-tupian"></i>视觉图片</p>
            <li class="list">
                <div class="part_nav part1">
                    <p class="firstTitle">导航栏 logo</p><p class="subTitle">建议PNG，140×50</p>
                </div>
                <div class="part_nav part2">
                    <img-upload limit="1" :imgList="logoImages" type="1" :edit="true" :isImgSave="true"></img-upload>
                </div>
            </li>
            <li class="list">
                <div class="part_nav part1">
                    <p class="firstTitle">登录界面背景图</p><p class="subTitle">建议PNG，1920×800</p>
                </div>
                <div class="part_nav part2">
                    <img-upload limit="3" :imgList="loginImages" type="2" :edit="true" :isImgSave="changImg3" ></img-upload>
                </div>
                <div class="part_nav part3" v-if="hasRole('images:system:edit')">
                    <div v-if="!changImg3" @click="changImg3 = true">修改</div>
                    <div v-else class="red"  @click="submit2">保存</div>
                </div>
            </li>
            <li class="list">
                <div class="part_nav part1">
                    <p class="firstTitle">线边应用 logo</p><p class="subTitle">建议PNG，210×75</p>
                </div>
                <div class="part_nav part2">
                    <img-upload limit="1" :imgList="centerBoardImages" type="4" :edit="true" :isImgSave="true"></img-upload>
                </div>
            </li>
            <li class="list">
                <div class="part_nav part1">
                    <p class="firstTitle">组织管理</p><p class="subTitle">建议PNG，150×30</p>
                </div>
                <div class="part_nav part2">
                    <img-upload limit="1" :imgList="orgImages" type="3" :edit="true" :isImgSave="true"></img-upload>
                </div>
            </li>
			<li class="list">
				<div class="part_nav part1">
					<p class="firstTitle">app图片</p><p class="subTitle">建议PNG，150×50</p>
				</div>
				<div class="part_nav part2">
					<img-upload limit="1" :imgList="appImages" type="9" :edit="true" :isImgSave="true"></img-upload>
				</div>
			</li>
        </div>

    </div>
</template>

<script>
import imgUpload from './imgUpload'
export default {
    components: {
        imgUpload
    },
    data() {
        return {
			logoImages: [],
			loginImages: [],
			orgImages: [],
			appImages: [],
			centerBoardImages: [],
			liuBoardImages: [],
			checkBoardImages: [],
			changeSystemName: false,
			sysInfo: {id: '', sysName: '', copyRight: '',value1:'',value2:''},
			changeCopyRight: false,
            changeValue1: false,
			changeValue2: false,
            changImg3: false,
        }
    },
    mounted() {
        let self = this;
        self.getList();
		self.getSysInfo();
    },
    methods: {

		saveValue2() {
			let self = this;
			let param = {id: self.sysInfo.id, value2: self.sysInfo.value2};
			self.$http({
				url: "/jinl/sysInfo/addOrUpdateSysInfo",
				method: "post",
				params: param
			}).then(resp => {
				if (resp.success) {
					self.changeValue2 = false;
					self.$message.success('修改成功！');
				} else {
					self.$message.error('修改报错，请联系管理员！');
				}
			});
		},
		saveValue1() {
			let self = this;
			let param = {id: self.sysInfo.id, value1: self.sysInfo.value1};
			self.$http({
				url: "/jinl/sysInfo/addOrUpdateSysInfo",
				method: "post",
				params: param
			}).then(resp => {
				if (resp.success) {
					self.changeValue1 = false;
					self.$message.success('修改成功！');
				} else {
					self.$message.error('修改报错，请联系管理员！');
				}
			});
		},

		saveCopyRight() {
			let self = this;
			let param = {id: self.sysInfo.id, copyRight: self.sysInfo.copyRight};
			self.$http({
				url: "/jinl/sysInfo/addOrUpdateSysInfo",
				method: "post",
				params: param
			}).then(resp => {
				if (resp.success) {
					self.changeCopyRight = false;
					this.$message.success('修改成功！');
					self.$eventBus.$emit("updateCopyRight", self.sysInfo.copyRight)
				} else {
					this.$message.error('修改报错，请联系管理员！');
				}
			});
		},
		saveSysName() {
			let self = this;
			let param = {id: self.sysInfo.id, sysName: self.sysInfo.sysName};
			self.$http({
				url: "/jinl/sysInfo/addOrUpdateSysInfo",
				method: "post",
				params: param
			}).then(resp => {
				if (resp.success) {
					self.changeSystemName = false;
					this.$message.success('修改成功！');
					self.$eventBus.$emit("updateSysName", self.sysInfo.sysName)
				} else {
					this.$message.error('修改报错，请联系管理员！');
				}
			});
		},
		getSysInfo() {
			let self = this;
			self.$http({
				url: "/jinl/sysInfo/getSysInfoList",
				method: "post",
				params:{notToken:true}
			}).then(resp => {
				if (resp.success) {
					self.sysInfo = resp.result;
				}
			});
		},



        getList() {
			let self = this;
			self.logoImages = [];
			self.loginImages = [];
			self.orgImages = [];
			self.centerBoardImages = [];
			self.liuBoardImages = [];
			self.checkBoardImages = [];
			self.appImages = [];
			self.$http({
				url: "/jinl/file/queryFileList",
				method: "post",
				data: JSON.stringify({types:['1','2','3','4','5','6','9'],notToken:true}),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				if (resp.success) {
					for (let data of resp.result) {
						let fileType = data.fileType;
						data.fileCheck = parseInt(data.fileCheck);
						data.fileBlob = data.fileUrl;
						data.fileName = data.displayName;
						if (fileType == 1) {
							self.logoImages.push(data)
						}
						if (fileType == 2) {
							self.loginImages.push(data)
						}
						if (fileType == 3) {
							self.orgImages.push(data)
						}
						if (fileType == 4) {
							self.centerBoardImages.push(data)
						}
						if (fileType == 5) {
							self.liuBoardImages.push(data)
						}
						if (fileType == 6) {
							self.checkBoardImages.push(data)
						}
						if (fileType == 9) {
							self.appImages.push(data)
						}

					}
				}
			});
        },
        submit1(){

        },
        submit2() {
			let params = [];
			let checkCount = 0;
			for (let i = 0; i < this.loginImages.length; i++) {
				let obj = {id: this.loginImages[i].id, fileCheck: this.loginImages[i].fileCheck};
				if (this.loginImages[i].fileCheck == 1) {
					checkCount++;
				}
				params.push(obj)
			}
			if(checkCount > 1){
				this.$message.warning('最多选择一张图片！');
			}else{
				this.updateImagesStatus(params);
                this.changImg3 = false
			}
        },

        submit5() {
			let params = [];
			let checkCount = 0;
			for (let i = 0; i < this.centerBoardImages.length; i++) {
				let obj = {id: this.centerBoardImages[i].id, fileCheck: this.centerBoardImages[i].fileCheck};
				if (this.centerBoardImages[i].fileCheck == 1) {
					checkCount++;
				}
				params.push(obj)
			}
			if(checkCount == 0){
				this.$message.warning('最少选择一张图片！');
			}else{
				this.updateImagesStatus(params);
			}
        },
		submit6() {
			let params = [];
			let checkCount = 0;
			for (let i = 0; i < this.liuBoardImages.length; i++) {
				let obj = {id: this.liuBoardImages[i].id, fileCheck: this.liuBoardImages[i].fileCheck};
				if (this.liuBoardImages[i].fileCheck == 1) {
					checkCount++;
				}
				params.push(obj)
			}
			if(checkCount == 0){
				this.$message.warning('最少选择一张图片！');
			}else{
				this.updateImagesStatus(params);
			}
        },

		submit7() {
			let params = [];
			let checkCount = 0;
			for (let i = 0; i < this.checkBoardImages.length; i++) {
				let obj = {id: this.checkBoardImages[i].id, fileCheck: this.checkBoardImages[i].fileCheck};
				if (this.checkBoardImages[i].fileCheck == 1) {
					checkCount++;
				}
				params.push(obj)
			}
			if(checkCount == 0){
				this.$message.warning('最少选择一张图片！');
			}else{
				this.updateImagesStatus(params);
			}
        },
		updateImagesStatus(params) { //删除图片
			let self = this;
			self.$http({
				url: "/jinl/file/updateFileCheckStatus",
				method: "post",
				data: JSON.stringify(params),
				dataType: 'json',
				contentType: "application/json",
			}).then(resp => {
				this.$message.success('保存成功');
			});

		},
    }
}
</script>
<style lang="scss">
.avatar-uploader_loginLogo {
    .el-upload--text {
        color: #00D1D0;
    }
}
</style>
<style lang="scss" scoped>
.visualImg {
    .box {
        margin-top: 15px;
        margin-bottom: 30px;
        padding: 0 20px;
        border: 1px solid #dbdbdb;
        position: relative;
        &.box2 {

            .list {
                min-height: 70px;
            }
        }
        .sub {
            line-height: 40px;
            text-align: center;
            position: absolute;
            background: #fff;
            width: 100px;
            color: #9e9e9e;
            top: -17px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 600;
            .iconfont {
                margin-right: 5px;
                color: #00D1D0;
                font-size: 16px;
            }
        }
        &.fu {
            height: 282px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .list_fu {
            margin: 20px 0;
            .name {
                color: #bbb;
                display: inline-block;
                width: 60px;
            }
        }
    }
    .list {
        border-top: 1px solid #f2f2f2;
        display: flex;align-items: center;
        min-height: 100px;
        &.board {
            flex-direction: column;
            position: relative;
            .board_box {
                width: 100%;
                display: flex;
                align-items: center;
                p {
                    line-height: 26px;
                }
            }
            .part3 {
                position: absolute;
                right: 0px;
                top: 130px;
            }
        }
        &:nth-child(1) {
            border-top: 0;
        }
        .part2 {
            width: calc(82% - 150px);
            height: 100%;
            display: flex;
            align-items: center;
            padding: 15px 0;
            .imgList {
                width: 202px;
                height: 52px;
                border: 1px dashed #d9d9d9;
                background-color: #f2f2f2;
                border-radius: 6px;
                padding: 5px;
                img.avatar {
                    width: 100%;
                    height: 100%;
                }
            }
            .imgArr2 {
                width: 20%;
                margin-right: 5%;
                height: 55%;
                border: 1px dashed #d9d9d9;
                background-color: #f2f2f2;
                border-radius: 6px;
                padding: 5px;
                position: relative;
                transition: all .5s;
                &:hover {
                    .icona { display: block; }
                }
                img.avatar {
                    width: 100%;
                    height: 100%;
                }
                .icona {
                    display: none;
                    position: absolute;
                    top: 0;
                    right: 0;
                    cursor: pointer;
                    color: #fff;
                    background: #f56c6c;
                    padding: 2px;
                    font-size: 14px;
                    border-radius: 14px;
                }
            }
            p {
                font-size: 14px;
            }
        }
        .part1 {
            width: 18%;
            .firstTitle {
                font-size: 14px;
                text-align: center;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 0;
            }
            .subTitle {
                font-size: 12px;
                text-align: center;
                color: #bbb;
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin: 5px 0 0 0;
            }
        }
        .part3 {
            width: 150px;
            display: flex;justify-content: center;
            div {
                width: 40px;
                color: #00D1D0;
                text-align: center;
                cursor: pointer;
                font-size: 14px;
                &:hover {
                    opacity: .7;
                }
                &.red {
                    color: #f44336;
                }
            }
        }
    }
}
</style>
